<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="m/head :: head"></div>

    <title>找回密码</title>
</head>
<body>
<div class="loginwrap">
    <div class="login-title">
        <a href="javascript: window.history.back(-1)">取消</a>
    </div>
    <div class="login-con retrieve-password">
        <div class="top">
            <dl>
                <dt style="background: #ff5a34;"></dt>
                <dd style="color: #ff5a34;">验证手机号</dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>重置登录密码</dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>修改成功</dd>
            </dl>
        </div>
        <p class="tishi">为了账号安全，请您验证身份</p>
        <form name="modifyForm" th:action="@{/retrieve/1}" method="post">
            <div class="login-input">
                <div class="login-text clearfix">
                    <div class="left">
                        手机号
                    </div>
                    <div class="right">
                        <input type="text" class="mobile-for-sms-code" name="mobile"/>
                    </div>
                </div>
                <div class="verify-text clearfix">
                    <div class="login-text" style="float: left;">
                        <div class="left">
                            短信验证码
                        </div>
                        <div class="right">
                            <input type="text" name="smsCode"/>
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="verify-btn get-sms-code" disabled>获取验证码</a>
                </div>
                <p class="error" th:text="${error}"></p>
            </div>
            <div class="bootom-btn">
                <!--<a href="javascript:void(0)" class="submit" style="display: block;">下一步</a>-->
                <button type="button" class="submit" id="submit-btn" disabled style="display: block;">下一步</button>
            </div>
        </form>
    </div>
</div>
</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        $('input[name="mobile"]').focus();

        // 控制手机号输入正确, 才可获取验证码
        var $getSmsCode = $('.get-sms-code');
        var $submitBtn = $('#submit-btn');
        var getSmsCodeStyle = $getSmsCode.attr('style') ? $getSmsCode.attr('style') : '';
        var submitBtnStyle = $submitBtn.attr('style') ? $submitBtn.attr('style') : '';
        $getSmsCode.css('background', 'rgb(211, 211, 211)');
        $submitBtn.css('background', 'rgb(211, 211, 211)')
        $('input[name="mobile"]').change(function () {
            if ($.trim(this.value).length != 0 && Pattern.CHINA_MOBILE.test($('input[name="mobile"]').val())) {
                $('#submit-btn').attr('disabled', false);
                $('.get-sms-code').removeAttr('disabled');
                $getSmsCode.attr('style', getSmsCodeStyle);
                $submitBtn.attr('style', submitBtnStyle);
            } else {
                $('#submit-btn').attr('disabled', true);
                $('.get-sms-code').attr('disabled', true);
                $getSmsCode.css('background', 'rgb(211, 211, 211)');
                $submitBtn.css('background', 'rgb(211, 211, 211)')
            }
        })

        $('#submit-btn').click(function () {
            if ($.trim($('input[name="mobile"]').val()).length == 0 || !(Pattern.CHINA_MOBILE.test($('input[name="mobile"]').val()))) {
                $('.login-input .error').text('请输入正确的手机号');
                return false;
            }
            if ($.trim($('input[name="smsCode"]').val()) == 0) {
                $('.login-input .error').text('请输入短信验证码');
                return false;
            }
            $('.login-input .error').text('');
            $('input[name="smsCode"]').val($.trim($('input[name="smsCode"]')));
            window.modifyForm.submit();
        })

    })
</script>

</html>
